前言

進入JS之後都沒有好好切版了，這次遇到切版還是有一些東西忘記了啊(汗)
不過學到了DOM 可以跟網頁互動了，就來試做一個簡易帳號密碼登入吧！

這是我在看胡立的 鋰學院 FE102 實作之後寫的過程。

Html

使用者輸入 label, input

不可能說連 <labeL> 要跟 <input> 綁在一起都忘記了吧～

當 label的屬性 for (<labeL for="name">) 跟 input的 id (<input id="name">) 是相同的話兩個會有連動效果。

像是當<input type="checkbox">的時候，不用直接點到框框，只要按到label的文字，checkbox也會打勾喔。

雖然我們不是使用 checkbox，可是還是很好用，只要點到文字就可以跳到 input 輸入的效果。

範例：

<div>
    <label for="account">User Account:</label>
    <input type="text" id="account" placeholder="account" name="account"  />
</div>

直接設定密碼欄：
這裡我們來試試看要輸入第二次密碼確認是否相同的機制，所以密碼欄會有兩個

<div>
    <label for="password1">User Password</label>
    <input
      type="password"
      placeholder="password"
      name="password1"
      id="password1"
    />
</div>
<div>
    <label for="password2">password again</label>
    <input
      type="password"
      placeholder="password again"
      name="password2"
      id="password2"
    />
</div>

表單 form, button

不可能說包覆這些帳號密碼輸入的不知道要用 <form> 吧～

• <button> 使用 type="submit"屬性會取到<form>裡面的<input>的值送出

  • 送出之後瀏覽器上方會顯示抓到的值 name 輸入 Jade, password...
    

• <button>使用type="reset"屬性會取到<form>裡面<input> 的值清除

一定外面要是包<form>才會取到喔！

<div>
    <button type="submit" name="submit">submit</button>
    <button type="reset" name="reset">clear</button>
</div>

小結：

總之這些表單常用的tag其實屬性功能都是有連動的，最好一起使用！
input, label, form, button

<form>
    <div>
        <label for="account">User Account:</label>
        <input type="text" id="account" placeholder="account" name="account"  />
    </div>
    <div>
        <label for="password1">User Password</label>
        <input
          type="password"
          placeholder="password"
          name="password1"
          id="password1"
        />
    </div>
    <div>
        <label for="password2">password again</label>
        <input
          type="password"
          placeholder="password again"
          name="password2"
          id="password2"
        />
    </div>
    <div>
        <button type="submit" name="submit">submit</button>
        <button type="reset" name="reset">clear</button>
    </div>
</form>

DOM

DOM的全名是Document Object Model，就是將html每一個節點都當作是個物件去操作，而我們可以利用Javascript去存取DOM。

事件監聽

現在要來監聽當使用者按下送出表單之後我們要做哪些事情。
其實這個部分滿簡單的就快速交代。

我們可以使用 document.querySelector(selectors) 選到現在的 event.target 就是 button。
然後再用 EventTarget.addEventListener(type, listener); 監聽這個 event.target 所按按鈕的動作。

const submit = document.querySelector("button[type=submit]");

submit.addEventListener('click', sumbitHandler)

然後來寫個判斷輸入兩個密碼一樣才讓使用者送出。
先取到這兩個password 的 value，然後寫判斷式兩個密碼是否一樣，送出不同的提醒。

function sumbitHandler() {
    // 選取event.target
    const password = document.querySelector("input[name=password1]");
    const password2 = document.querySelector("input[name=password2]");
    
    //判斷
    if (password.value === password2.value) {
     alert("sent!");
    } else {
     alert("密碼輸入不正確");
    } 
});

到這邊最簡單的基本功能基本上已經有了，接下來來把使用者輸入的資料儲存起來。

Local Storage

因為現在這個網頁是以本地資料夾開啟的，所以選擇把使用者輸入的資料儲存在Local Storage裡面。

Local Storage是一個本地的儲存空間，在Html 5之後所提供的，除了Local Storage還有 Session Storage，區別是Session Storage只能儲存一個分頁的內容，關掉這個分頁之後就沒有了。

打開開發者工作裡面的application裡面看到一個Local Storage，裡面可以查看目前存了什麼資料進去Local Storage。

真正的帳號密碼不會儲存在local storage，太不安全了！

local storage所儲存的結構都是 key, value 的形式，
而且只能儲存字串。

local storage有四種語法可以使用
新增：

localStorage.setItem(key, value);

取出：

localStorage.getItem(key);

移除：

localStorage.removeItem(key);

全部清除：

localStorage.clear();

先來使用把使用者輸入新增進去Local Storage。

儲存資料這件事情是在使用者按下送出的那一瞬間的動作，所以我們把這件事加在button的監聽事件上。

而且這件事情是要在密碼兩個都輸入正確的狀態才把他們儲存在local storage裡面，所以放在if後面。

• 選取了account的event.target，再用account.value拿到輸入的值。
• 然後使用localStorage.setItem(key, value) key值自訂，把值放進去value裡面就好了。

function sumbitHandler(e) {
  const password = document.querySelector("input[name=password1]");
  const password2 = document.querySelector("input[name=password2]");
  const account = document.querySelector("input[name=account]");
    
  if (password.value === password2.value) {
     alert("sent!");
      
    // 添加儲存資料
    const accountValue = account.value;
    localStorage.setItem("account", accountValue);

    const passwordValue = password.value;
    localStorage.setItem("password", passwordValue);
      
  } else {
    alert("密碼輸入不正確");
  } 
});

輸入之後再打開Local Storage就可以看到儲存的資料了！

雖然使用者的輸入都已經進去Local Storage了，但我希望在使用者就算離開之後這些資料都還是可以被記住，這樣他們就不用再輸入一次了，就像是記住帳號密碼一樣。

這時候就可以用 localStorage.getItem(key)。

不可能取出資料這件事情還要放在監聽事件裡面吧～

要記得放到監聽事件的外面啊，不然這個取出然後再賦值回去的動作只有按下按鈕那瞬間！一按完就結束了...

設一個變數去接getItem回來的值，然後把他們賦值回去給event.target的value裡面。

// 在監聽事件以外
const oldAccountValue = localStorage.getItem("account");
account.value = oldAccountValue;

const oldPasswordValue =localStorage.getItem("password");
password.value = oldPasswordValue;

這樣的話，輸入的帳號密碼不管重整幾次都會一直在喔！

結論

這次的重點是html表單互相連動以及Local Storage儲存的部分，當初花了我一些時間，因為我把 localStorage.getItem(key) 放在監聽事件裡面，所以不管怎麼做都一直被洗掉T_T。

今天就這樣拉～
DOM的初心者的簡易帳號密碼登入，希望大家有學到喔！

明天見～

參考資料：鋰學院 FE102
認識瀏覽器的神秘儲存空間 - localStorage
[JS] localStorage 筆記
Day20 localStorage、sessionStorage